<template>
  <div class="antvG6">
    <div class="mountNode" ref="mountNode"></div>
    <div class="topAction">
      <Select v-model="tableSelect" style="width:300px" @on-clear="clearSelect" filterable placeholder="请输入表名" clearable @on-change="selectChange">
        <Tooltip :content="item.label" placement="top-start" v-for="item in sqlFlowData.nodes" :key="item.id"  transfer>
          <Option  :value="item.id" >{{ item.label }}</Option>
        </Tooltip>
      </Select>
    </div>
    <div class="rightAction">
      <div v-for="(item,index) in actions" :key="index"  @click="actionClick(item)" class="actionItem"> 
        <Tooltip :content="item.name" placement="left">
          <svg viewBox="0 0 1024 1024" version="1.1" fill= '#aaa' height= '15px' width= '15px'>
            <path :d="item.d"></path>
          </svg>
        </Tooltip>
      </div>
        
    </div>
  </div>
</template>

<script>
import FlowGraph from '@/tool/antvG6'
export default {
  name: 'antvG6',
  props:['sqlFlowData'],
  data () {
    return {
      tableSelect:'',
      graph: null,
      minimap: null,
      actions:[
        {name:'zoomIn',d:"M426.666667 426.666667V0h170.666666v426.666667h426.666667v170.666666H597.333333v426.666667H426.666667V597.333333H0V426.666667h426.666667z"},
        {name:'zoomOut',d:"M0 426.656h1024v170.656H0v-170.656z"},
        {name:'reset',d:"M1026.240435 439.0084h-365.619126l145.296653-145.369653a365.619125 365.619125 0 1 0 57.987861 320.136234l131.622685 65.810843a511.867775 511.867775 0 1 1-85.919794-489.929828L1026.239435 73.389274v365.619126z"},
        ],
      nodes: [
        {
          id: 'node1', // String，该节点存在则必须，节点的唯一标识
          label: 'SDATA.A_SALES',
          type: 'bloodNode',
          field: [
            {
              key: 'id',  //和线里面的sourceKey对应(key为唯一标识)
              type: 'number(6)'
            },
            {
              key: 'name',   
              type: 'VARCHAR(10)'
            }
          ]
        },
        {
          id: 'node2', // String，该节点存在则必须，节点的唯一标识
          label: 'DATA.A_SALES',
          type: 'bloodNode',
          field: [
            {
              key: 'key',
              type: 'varchar(255)'
            },
            {
              key: 'gender',
              type: 'enum(M, F)'
            },
            {
              key: 'birthday',
              type: 'date'
            },
            {
              key: 'hometown',
              type: 'varchar(255)'
            }
          ]
        },
        {
          id: 'node3', // String，该节点存在则必须，节点的唯一标识
          label: 'cdata.A_DFG',
          type: 'bloodNode',
          field: [
            {
              key: 'date',  //和线里面的sourceKey对应(key为唯一标识)
              type: 'number(6)'
            },
            {
              key: 'age',   
              type: 'VARCHAR(10)'
            }
          ]
        },
        {
          id: 'node4', // String，该节点存在则必须，节点的唯一标识
          label: 'cdata.A_DFG1',
          type: 'bloodNode',
          field: [
            {
              key: 'date1',  //和线里面的sourceKey对应(key为唯一标识)
              type: 'number(6)'
            },
            {
              key: 'age1',   
              type: 'VARCHAR(10)'
            }
          ]
        },
      ],
      edges: [
        {
          source: 'node1', // String，必须，起始点 id
          target: 'node2',  // String，必须，目标点 id
          sourceKey: 'name',
          targetKey: 'hometown',
          type: 'bloodEdge'
          // type: 'erEdge'
        },
        {
          source: 'node1', // String，必须，起始点 id
          target: 'node2',  // String，必须，目标点 id
          sourceKey: 'id',
          targetKey: 'birthday',
          type: 'bloodEdge'
          // type: 'erEdge'
        },
        {
          source: 'node2', // String，必须，起始点 id
          target: 'node3',  // String，必须，目标点 id
          sourceKey: 'birthday',
          targetKey: 'date',
          type: 'bloodEdge'
          // type: 'erEdge'
        },
        {
          source: 'node3', // String，必须，起始点 id
          target: 'node4',  // String，必须，目标点 id
          sourceKey: 'date',
          targetKey: 'date1',
          type: 'bloodEdge'
          // type: 'erEdge'
        },
        {
          source: 'node2', // String，必须，起始点 id
          target: 'node3',  // String，必须，目标点 id
          sourceKey: 'hometown',
          targetKey: 'age',
          type: 'bloodEdge'
          // type: 'erEdge'
        },
      ],
      bloodNodes: [],
      bloodEdges: []
    }
  },
  async mounted () {
    // const { data: res } = await this.Api.get('/adp/adp/sql/getSqlBlood', { params: { taskId: 897, distance: '', direction: '' } })
    // this.bloodNodes = res.data.filter(item => item.shape === 'er-rect')
    // this.bloodEdges = res.data.filter(item => item.shape === 'edge')
    // this.initGraph(this.$refs.mountNode)
  },
  methods: {
    clearSelect(){
      const graph = this.graph.graph
      graph.fitCenter();
      graph.getNodes().forEach(node=>{
        console.log(node)
          node.getContainer().findAll(con=>{
            if(con.get('type') == 'rect'&&con.attr('name') == undefined){
              con.attr({shadowColor:'',shadowBlur:0,lineWidth:2})
            }
          })
      })
    },
    selectChange(val){
      if(val===undefined)return
      const graph = this.graph.graph
      const node = graph.findById(val)
      console.log(node)
      graph.focusItem(node,true);
      graph.getNodes().forEach(node=>{
        node.getContainer().findAll(con=>{
          if(con.get('type') == 'rect'&&(con.get('name') == 'tooltip-response')){
            con.attr({fill:'#91c051'})
          }
           if(con.get('type') == 'rect'&&con.attr('name') == undefined){
            con.attr({shadowColor:'',shadowBlur:0,lineWidth:2,stroke: '#91c051'})
          }
        })
      })
      node.getContainer().findAll(con=>{
        if(con.get('type') == 'rect'&&(con.get('name') == 'tooltip-response')){
          con.attr({fill:'#c5705d'})
        }
        if(con.get('type') == 'rect'&&(con.attr('name') == undefined)){
            con.attr({shadowColor:'#c5705d',shadowBlur:10,lineWidth:2,stroke:'#c5705d'})
            console.log(con.attr(),con)
          }
        })
    },
    actionClick(item){
      const {graph} = this.graph
      switch(item.name){
        case 'zoomIn':
          graph.zoom(1.09);
          break;
        case 'zoomOut':
          graph.zoom(0.9);
          break;
        case 'reset':
          graph.zoomTo(1);
          break
      }
    },
    initGraph (container) {
      this.graph = new FlowGraph()
      this.graph.initGraph(container)
      // for (let i = 0; i < 50; i++) {
      //   this.nodes.push({ id: `node${i + 3}`, label: `${i + 3}`, type: 'rect' })
      // }
      // this.edges.push({ source: 'node1', target: 'node3', style: {endArrow: {path: 'M 0,0 L 8,4 L 8,-4 Z', fill: '#ececec'}}, type: 'cubic-horizontal' })
      // this.edges.push({ source: 'node1', target: 'node4', style: {endArrow: {path: 'M 0,0 L 8,4 L 8,-4 Z', fill: '#ececec'}}, type: 'cubic-horizontal' })
      // this.edges.push({ source: 'node2', target: 'node4', style: {endArrow: {path: 'M 0,0 L 8,4 L 8,-4 Z', fill: '#ececec'}}, type: 'cubic-horizontal' })
      // for (let i = 0; i < 49; i++) {
      //   this.edges.push({ source: `node${i + 3}`, target: `node${i + 4}`, style: {endArrow: {path: 'M 0,0 L 8,4 L 8,-4 Z', fill: '#ececec'}}, type: 'cubic-horizontal' })
      // }
      this.graph.renderData(this.sqlFlowData.nodes, this.sqlFlowData.edges)
      this.graph.render()
      
      const graph = this.graph.graph
      graph.on('canvas:click',(e)=>{
        graph.getNodes().forEach(node=>{
          node.getContainer().findAll(con=>{
            if(con.get('type') == 'rect'&&(con.get('name') == 'tooltip-response')){
              con.attr({fill:'#91c051'})
            }
            if(con.get('type') == 'rect'&&con.attr('name') == undefined){
              con.attr({shadowColor:'',shadowBlur:0,lineWidth:2,stroke: '#91c051'})
            }
          })
        })
      })
      graph.on("canvas:mousedown",(e)=>{  
        e.target.set('cursor','grab')
      })
      graph.on("canvas:mouseout",(e)=>{
        e.target.set('cursor','grab')
      })
      graph.on("canvas:mouseup",(e)=>{
        e.target.set('cursor','grab')
      })
    },
    downloadFullImage(name){
      this.graph.downloadFullImage(name)
    },
    clearGraph () {
      this.graph.clear()
    },
    destroyGraph () {
      this.graph.destroy()
    }
  }
}
</script>

<style lang="less" scoped>

  .antvG6 {
    height: 100%;
    position: relative;
    /deep/.ivu-tooltip {
      width: 100%;
    }
    /deep/.ivu-select-dropdown-list {
        width: 300px;
    }
    /deep/ .ivu-select-item {
      overflow: hidden;
      white-space: nowrap;
      text-overflow: ellipsis;
    }
    .topAction{
      position: absolute;
      top:15px;
      z-index: 5;
      left: 20px;
    }
    .rightAction{
      position: absolute;
      right: 30px;
      top: 30px;
      z-index: 5;
      .actionItem{
        background-color: hsla(0,0%,93%,.65);
        border-radius: 5px;
        cursor: pointer;
        font-size: 0;
        margin-bottom: 25px;
        padding: 5px;
      }
    }
    .mountNode {
      cursor: grab;
      background-color: #eee;
      height: 100%;
      /deep/ .toolTip{
        background-color: rgba(0,0,0,.75);
        border-radius: 2px;
        box-shadow: 0 3px 6px -4px rgb(0 0 0 / 12%), 0 6px 16px 0 rgb(0 0 0 / 8%), 0 9px 28px 8px rgb(0 0 0 / 5%);
        color: #fff;
        padding: 6px 8px;
          text-align: left;
          text-decoration: none;
      }
      /deep/.minimap {
        position: absolute;
        bottom: 35px;
        right: 0;
        height: auto !important;
        .g6-minimap-container {
          border: 1px solid #000;
          background-color: #fff;
          opacity: .9;
          .minimapViewport {
            outline: 2px red solid !important;
          }
        }
      }
    }
  }
</style>
